/* 正文背景 */
@background: white;
/* 富文本边框 */
@borderColor: #CCCCCC;

.box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px;
  height: 100%;
  .messageBox{
    flex: 0 1 63%;
    background: @background;
    height: inherit;
    padding: 20px 30px 0;
    overflow: auto;
    /* 富文本占位符 */
    .richTextPlaceholder{
      height: 40px;
      border: 1px solid @borderColor;
      border-radius: 5px;
      padding-left: 20px;
      line-height: 40px;
      font-size: 14px;
      color: #757575;
      cursor: text;
    }
    .richTextBox{
      border-radius: 7px;
      background: #F8F8F8;
      /* 富文本盒子 */
      .wrapper{
        border: 1px solid @borderColor;
        border-radius: 10px;
        background: white;
        // overflow: hidden;
        .toolbar{
          border-radius: 15px;
          border: none;
          // border: 1px solid blue;
        }
        .editor{
          height: 100px;
          min-height:120px;
          overflow-y: auto;
          padding: 0 10px;
          border-top: 1px solid @borderColor;
        }
      }
      /* 提交富文本 */
      .richTextSubmitBox{
        height: 35px;
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        align-items: center;
        .richTextBtnBox{
          button:nth-child(1){
            margin-right: 10px;
          }
        }
      }
      .group{
        padding-left: 10px;
      }
    }
    /* 主体内容 */
    .content{
      /* 过滤条件 */
      .filterBox{
        display: flex;
        align-items: center;
        margin: 20px 10px;
        height: 30px;
        .searchBox{
          position: relative;
          cursor: pointer;
          height: inherit;
          &::before{
            content: '';
            width: 0;
            height: inherit;
            display: inline-block;
            vertical-align: middle;
          }
          &:hover{
            .search{
              color: #397AB7;
            }
          }
          & > i.search{
            padding-left: 6px;
            border-top: 2px solid white;
            border-left: 1px solid white;
          }
          .search{
            font-weight: bold;
            color: #A5A8BD;
            vertical-align: middle;
            cursor: pointer;
          }
          .beginSearch{
            width: 22px;
            height: inherit;
            border-radius: 5px;
            overflow: hidden;
            transition: all 1s;
            background: white;
            border: 1px solid #d9d9d9;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            display: none;
            label{
              display: flex;
              align-items: center;
              height: inherit;
              padding-left: 6px;
              cursor: text;
              input{
                margin: 0;
                padding: 0 0 0 4px;
                height: auto;
                border: none;
                flex: auto;
                &:focus{
                  box-shadow: none;
                }
              }
              .close{
                background: #D9D9D9;
                padding: 2px;
                border-radius: 50%;
                color: white;
                font-weight: bold;
                transform: scale(.7);
                margin-right: 3px;
                cursor: pointer;
                &:hover{
                  background:red;
                }
              }
            }
          }
        }
        .spaceLine{
          margin: 0 10px 0 14px;
          width: 0px;
          height: 11px;
          border-right: 1px solid #B06D33;
          display: inline-block;
        }
        .filterConditionBox{
          cursor: pointer;
          padding: 4px;
          padding-right: 8px;
          border-radius: 5px;
          border: 1px solid transparent;
          &:hover{
            background: #FBFBFB;
            border-color: #EEEEEE;
            .fixationCondition{
              color: #333333;
            }
          }
          .fixationCondition{
            color: #C1BBCA;
          }
          .classes{
            color: #337AB7;
            padding: 0 4px;
          }
        }
      }
      /* 消息 */
      .messagePanel{
        display: flex;
        margin: 20px 0;
        & > img{
          flex: 0 1 auto;
          min-width:40px;
          /* min-height: 40px; */
        }
        figcaption{
          margin-left: 10px;
          flex: auto;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .divideDot{
            margin: 0 6px;
            text-align: center;
            &::before{
              content: '·';
              display: inline-block;
            }
          }
          .title{
          }
          .details{
            margin: 10px 0;
          }
          .leaveWord{
            & > p:nth-child(1){
              & > span:nth-child(1){
                color: #108EE9;
              }
              .publishTime{
                color: #999999;
              }
            }
          }
        }
      }
    }
  }
  .NCharBox{
    flex: 0 1 33%;
    background: @background;
    height: inherit;
  }
}

.hide{
  display: none;
}
/* 首页筛选条件下拉列表样式 */
.filterGroup{
  & > div{
  color: #777777;
  }
  .fdsa{
    color: #333333;
    padding-left: 20px;
  }
}
.check{
  width: 13px;
  color: #2AB7E3;
  margin-right: 10px;
  font-weight: bolder;
  display: inline-block;
}